<!DOCTYPE html>
<html lang="zh-Cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }

        .clearfix {
            *zoom: 1
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .header {
            height: 40px;
            line-height: 40px;
            background-color: #333;
        }

        .header ul li {
            float: left;
            height: 40px;
        }

        .header ul li a {
            padding: 0 10px;
            color: #b0b0b0;
            font-size: 12px;
        }

        .header ul li a:hover {
            color: #fff;
        }

        .header-left {
            float: left;
        }

        .header-right {
            float: right;
        }

        .nav {
            height: 100px;
        }

        .nav-logo {
            float: left;
            margin-top: 22px;
            width: 55px;
            height: 55px;
        }

        .nav-logo a {
            display: block;
            width: 55px;
            height: 55px;
            background: #ff6700 url(image/mi-logo.png) no-repeat center center;
            -webkit-transition: all .4s linear;
            -moz-transition: all .4s linear;
            -o-transition: all .4s linear;
            transition: all .4s linear4
        }

        .nav-logo a:hover {
            background-image: url(image/mi-home.png);
        }

        .nav-main {
            float: left;
            margin-left: 50px;
            height: 100px;
            line-height: 100px;
        }

        .nav-main li {
            float: left;
        }

        .nav-main li a {
            display: block;
            padding: 0 14px;
            font-size: 16px;
            color: #333;
        }

        .nav-main li a:hover {
            color: #ff6700;
        }

        .nav-search {
            float: right;
            margin-top: 25px;
        }

        .search-text {
            float: left;
            width: 233px;
            height: 48px;
            border: 1px solid #e0e0e0;
            border-right: none;
            padding: 0 10px;
        }

        .search-btn {
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid #e0e0e0;
            background: #fff url(image/search.png) no-repeat center center;
            background-size: 50% 50%;
        }

        .search-btn:hover {
            background: #ff6700 url(image/search-active.png) no-repeat center center;
            background-size: 50% 50%;
            cursor: pointer;
        }

        .banner {
            height: 460px;
        }

        .banner-left {
            float: left;
            width: 240px;
            height: 460px;
            background-color: pink;
        }

        .banner-right {
            float: right;
            width: 960px;
            height: 460px;
            background-color: skyblue;
        }

        .banner-right img {
            width: 100%;
            height: 100%;
        }

        .box-hd {
            height: 58px;
        }

        .box-hd .title {
            float: left;
            font-size: 22px;
            font-weight: 200;
            line-height: 58px;
        }

        .box-hd .more {
            float: right;
            line-height: 58px;
        }

        .box-hd .more a {
            font-size: 16px;
            color: #424242;
        }

        .box-hd .more a:hover {
            color: #ff6700;
        }

        .box-bd {
            width: 1220px;
        }

        .box-bd .item {
            float: left;
            margin: 0 20px 20px 0;
            width: 224px;
            height: 300px;
            background-color: pink;
            -webkit-transition: all .2s linear;
            -moz-transition: all .2s linear;
            -o-transition: all .2s linear;
            transition: all .2s linear;
        }

        .box-bd .item:hover {

            box-shadow: 0 15px 30px rgba(0, 0, 0, .1);

            -webkit-transform: translate3d(0, -8px, 0);
            -moz-transform: translate3d(0, -8px, 0);
            -o-transform: translate3d(0, -8px, 0);
            transform: translate3d(0, -8px, 0);
        }

        .banner-box {
            width: 1200px;
            margin: 22px auto;
        }

        .banner-box img {
            width: 100%;
        }

        .footer {
            padding: 40px 0;
        }

        .footer-left {
            float: left;
        }

        .footer-left .link {
            float: left;
            width: 160px;
        }

        .link dt {
            padding-bottom: 20px;
            font-size: 14px;
            color: #424242;
        }

        .link dd a {
            font-size: 12px;
            line-height: 24px;
            color: #757575;
        }

        .link dd a:hover {
            color: #ff6700;
        }

        .footer-right {
            float: right;
            width: 240px;
            text-align: center;
            color: #616161;
        }

        .footer-right .phone {
            margin-bottom: 6px;
            font-size: 22px;
            color: #ff6700;
        }

        .footer-right .time {
            margin-bottom: 6px;
            font-size: 12px;
        }

        .footer-right .footer-btn {
            display: inline-block;
            width: 118px;
            height: 28px;
            line-height: 28px;
            border: 1px solid #ff6700;
            background: #fff;
            color: #ff6700;
            font-size: 12px;
        }

        .footer-right .footer-btn:hover {
            background: #ff6700;
            color: #fff;
        }

        .footer-right .bottom {
            margin-top: 10px;
            font-size: 12px;
        }

        .footer-right .bottom a {
            display: inline-block;
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-left: 6px;
            margin-top: -3px;
        }

        .footer-right .bottom .wb {
            background: url(image/wb.png) no-repeat center center;
            background-size: 100% 100%;
        }

        .footer-right .bottom .wx {
            background: url(image/wx.png) no-repeat center center;
            background-size: 100% 100%;
        }

        .tool {
            position: fixed;
            top: 200px;
            right: 20px;
            background-color: #fff;
        }

        .tool a {
            display: block;
            border: 1px solid #f5f5f5;
            font-size: 12px;
            color: #333;
            padding: 10px 20px;
        }

        .tool a:hover {
            color: #ff6700;
        }
    </style>
</head>

<body>
    <div class="header" id="top">
        <div class="container">
            <ul class="header-left">
                <li><a href="#">小米商城</a></li>
                <li><a href="#">MIUI</a></li>
                <li><a href="#">IoT</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">天星数科</a></li>
                <li><a href="#">有品</a></li>
                <li><a href="#">小爱开放平台</a></li>
                <li><a href="#">企业团购</a></li>
                <li><a href="#">资质证照</a></li>
                <li><a href="#">协议规则</a></li>
                <li><a href="#">下载app</a></li>
                <li><a href="#">智能生活</a></li>
                <li><a href="#">Select Location</a></li>
            </ul>
            <ul class="header-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">消息通知</a></li>
            </ul>
        </div>
    </div>
    <div class="nav">
        <div class="container">
            <div class="nav-logo">
                <a href="#"></a>
            </div>
            <ul class="nav-main">
                <li><a href="#">小米手机</a></li>
                <li><a href="#">Redmi 红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
            <div class="nav-search">
                <input type="text" class="search-text" placeholder="家电">
                <input type="button" class="search-btn">
            </div>
        </div>
    </div>
    <div class="banner container">
        <div class="banner-left"></div>
        <div class="banner-right">
            <img src="image/banner.jpg">
        </div>
    </div>
    <div class="box container">
        <div class="box-hd">
            <h2 class="title"><a name="phone">手机</a></h2>
            <div class="more">
                <a href="#">查看全部</a>
            </div>
        </div>
        <div class="box-bd clearfix">
            <ul>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
            </ul>
        </div>
    </div>
    <div class="banner-box">
        <img src="image/banner1.jpg">
    </div>
    <div class="box container">
        <div class="box-hd">
            <h2 class="title"><a name="jiadian">家电</a></h2>
            <div class="more">
                <a href="#">查看全部</a>
            </div>
        </div>
        <div class="box-bd clearfix">
            <ul>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
            </ul>
        </div>
    </div>
    <div class="banner-box">
        <img src="image/banner2.jpg">
    </div>
    <div class="container footer clearfix">
        <div class="footer-left">
            <dl class="link">
                <dt>帮助中心</dt>
                <dd><a href="#">账户管理</a></dd>
                <dd><a href="#">购物指南</a></dd>
                <dd><a href="#">订单操作</a></dd>
            </dl>
            <dl class="link">
                <dt>服务支持</dt>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">自助服务</a></dd>
                <dd><a href="#">相关下载</a></dd>
            </dl>
            <dl class="link">
                <dt>线下门店</dt>
                <dd><a href="#">小米之家</a></dd>
                <dd><a href="#">服务网点</a></dd>
                <dd><a href="#">授权体验店</a></dd>
            </dl>
            <dl class="link">
                <dt>关于小米</dt>
                <dd><a href="#">了解小米</a></dd>
                <dd><a href="#">加入小米</a></dd>
                <dd><a href="#">投资者关系</a></dd>
                <dd><a href="#">企业社会责任</a></dd>
                <dd><a href="#">廉洁举报</a></dd>
            </dl>
            <dl class="link">
                <dt>关注我们</dt>
                <dd><a href="#">新浪微博</a></dd>
                <dd><a href="#">官方微信</a></dd>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">公益基金会</a></dd>
            </dl class="link">
            <dl class="link">
                <dt>特色服务</dt>
                <dd><a href="#">F 码通道</a></dd>
                <dd><a href="#">礼物码</a></dd>
                <dd><a href="#">防伪查询</a></dd>
            </dl>
        </div>
        <div class="footer-right">
            <p class="phone">400-100-5678</p>
            <p class="time">8:00-18:00（仅收市话费）</p>
            <a href="#" class="footer-btn">人工客服</a>
            <div class="bottom">
                关注小米：
                <a href="#" class="wb"></a>
                <a href="#" class="wx"></a>
            </div>
        </div>
    </div>
    <div class="tool">
        <a href="#phone">1F 手机</a>
        <a href="#jiadian">2F 家电</a>
        <a href="#top">回到顶部</a>
    </div>
</body>

</html>